<template>
	<view class="register">
		<view class="item">
			<text class="required label">合同标题</text>
			<!-- <native_input1 @input="inputDelegator('hetongBiaoTi', $event)" placeholder="请输入合同标题" /> -->
			<text>{{hetongBiaoTi}}</text>
		</view>
		<view class="item">
			<text class="required label">提货方式</text>
			<view class="address" :class="tihuoFangshi ? '':' placeholder'">
				<!-- <picker @change="selectArea" :value="index" :range="array">
					{{tihuoFangshi ? tihuoFangshi : '请选择提货方式'}}
					<image src="/static/images/login/right_arrow.png" class="global_right_arrow_style" />
				</picker> -->
				<text>{{tihuoFangshi}}</text>				
			</view>
		</view>
		<view class="item">
			<text class="required label">销售合同</text>
			<view class="address" :class="hetongName ? '':' placeholder'">
				<!-- <picker @change="selectHetong" :value="index1" :range="hetongList">
					{{ hetongName ? hetongName : '请选择销售合同'}}
					<image src="/static/images/login/right_arrow.png" class="global_right_arrow_style" />
				</picker> -->
				<text>{{hetongName}}</text>				
			</view>
		</view>
		<view class="item">
			<text class="required label">提货人/联系人</text>
			<!-- <native_input1 @input="inputDelegator('lianxiren', $event)" placeholder="请选择联系人" type="number" /> -->
			<text>{{lianxiren}}</text>		
		</view>
		<view class="item">
			<text class="required label">联系方式</text>
			<!-- <native_input1 @input="inputDelegator('lianxiFangshi', $event)" placeholder="请输入联系方式" type="number" /> -->
			<text>{{lianxiFangshi}}</text>		
		</view>
		<view class="item">
			<text class="required label">提货授权开始日期:</text>
			<view class="address" :class="hetongstartTime ? '':' placeholder'">
				<!-- <picker  mode="date" :value="date" :start="startDate" :end="endDate" @change="selectStartDateView">
					{{ hetongstartTime ? hetongstartTime : '请选择开始日期'}}
					<image src="/static/images/login/right_arrow.png" class="global_right_arrow_style" />
				</picker> -->
                <text>{{hetongstartTime}}</text>		
			</view>
		</view>
		<view class="item">
			<text class="required label">提货授权结束日期:</text>
			<view class="address" :class="hetongendTime ? '':' placeholder'">
				<!-- <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="selectEndDateView">
					{{ hetongendTime ? hetongendTime : '请选择结束日期'}}
					<image src="/static/images/login/right_arrow.png" class="global_right_arrow_style" />
				</picker> -->
             <text>{{hetongendTime}}</text>
			</view>
		</view>
		
		<view class="item"  v-if="index == 1">
			<text class="required label">物流公司</text>
			<view  class="address" :class="wuliuName ? '':' placeholder'">
				<!-- <picker @change="selectWuliu" :value="index3" :range="wuliuList">
					{{ wuliuName ? wuliuName : '请选择物流公司'}}
					<image src="/static/images/login/right_arrow.png" class="global_right_arrow_style" />
				</picker> -->
				<text>{{wuliuName}}</text>
			</view>
		</view>
		
		<view class="item noborder" v-if="index == 0 " >
			<image class="imageView1" :src="URL2"></image>
		</view>

		<view class="item noborder"  v-if="index == 0 ">		
			<image class="imageView" :src="URL1"></image>
		</view>
		<view class="item"  v-if="index == 0 ">
			<text class="required label">身份证编号:</text>
			<text>{{shenfenzhenghao}}</text>
			<!-- <native_input1 @input="inputDelegator('shenfenzhenghao', $event)" placeholder="请输入身份证编号" /> -->
		</view>
		<view class="item" v-if="index == 1">
			<text class="required label" >提货仓库:</text>
			<view class="address" :class="cangkuName ? '':' placeholder'">
				<!-- <picker  @change="selectCangku" :value="index2" 
				 :range="cangkuList"  >
					{{ cangkuName ? cangkuName : '请选择提货仓库'}}
					<image src="/static/images/login/right_arrow.png" class="global_right_arrow_style" />
				</picker> -->
			<text>{{cangkuName}}</text>
			</view>
		</view>
		<view class="item">
			<text class="required label">备注:</text>
			<!-- <native_input1 @input="inputDelegator('beizhu', $event)" placeholder="备注" /> -->
			<text>{{beizhu}}</text>
		</view>
		<view class="item">
			<view class="BGView">商品信息</view>
		</view>
		
		<view class="fund_detail">
			<view class='list' v-for="(item, index) in proDuctList" :key="item.changeTime">
			  <view class='side_left'>
			    <text class='title'>{{item.prouctName}}</text>
			    <text class='balance'>
			      商品规格：<text class='balance_money'>{{item.spec}}</text>
			    </text>
			  </view>
			  <view class='side_right'>
			    <text class='trade'>{{''}}</text>				
				<text class='date'>{{'库存: '+ item.qty}}</text>						
				<!-- <input class="putTest" v-model="item.qty" type="text" :placeholder="0" @input="fors(index,$event)"> -->
			  </view>			  
			</view>
			<view class="empty" v-if="list.length === 0 && showData">
				<image class="icon" src="/static/images/empty.png"></image>
				暂无数据
			</view>
			<!-- <LoadingBar2
				:update='updating'
				:refresh="refresh"
				:params="{saleContractId: hetongId?hetongId:'0'}"
				url="pickupSalecontractgoodlist"
				:list="list"
				@bind_list="bindList"/> -->
		</view>
		<!-- <customButton classes="bigBt sure" @tap="submit">提交</customButton>		 -->
	</view>
</template>

<script>
	// import native_input1 from '@/common/components/input/index.vue'
	import input_code from '@/common/components/input/input-code/index.vue'
	import customButton from '@/common/components/button/index.vue'
	import HbUpload11 from './uploadDetail/index.vue'
	import LoadingBar2 from '@/common/components/loader/LoadPostBar/index.vue'
	export default {
		components: {
			// native_input1,
			customButton,
			input_code,
			HbUpload11,
			LoadingBar2
		},
		mounted() {
			this.refresh = !this.refresh
		},
		onReachBottom() {
		  this.updating = !this.updating;
		},
		data() {
			return {
				contractId: '',
				hetongBiaoTi: '',
				lianxiren: '',
				lianxiFangshi: '',
				shenfenzhenghao: '',
				beizhu: '',
				tihuoFangshi: '',      //提货方式
				hetongName: '',        //合同名称
				hetongList: [],        //合同列表
				hetongstartTime: '',   //合同开始时间
				hetongendTime: '',     //合同结束时间				
				array: ['自提', '物流'],
				index: '',              //提货index
				index1: 0,             //合同列表index
				index2: 0,             //仓库列表index
				index3: 0,
				cangkuList: [],        //仓库列表
				cangkuName: '',        //仓库名称
				cangkuId: '',
				cangKuResData: [],
				list: [],
				updating: false,
				refresh: false,
				showData: false,
				list: [],
				hetongTempList: [],
				ying_url: {
					imgUrl: ''
				}, // 已上传的营业执照地址
				shengFen_url: {
					imgUrl: ''
				}, //身份证正面
				wuliuList: [],
				wuliuName: '',
				wuliuId: '',
				wuLiuResData: [],
				hetongId: '',
				hetongResData: [],
				proDuctList: [],
				proKunCun: '',	
				URL1: '',
				URL2: '',
			}

		},
		methods:{
			// bindList(list) {
			// 	console.log('haahhaahh=', list)
			// 	this.showData = true
			// 	this.list = this.proDuctList
			// },
			updateURL(url, key) {
				console.log(url, key)
				this[key] = url
			},
			getData(){
				this.http.POST({
					name: 'pickupInfo',
					params: {
						contractId: this.contractId
					}
				})
				.then(res => {
					if(res.result === 'success') {
					this.index = res.data.pickUpType	
					console.log('res.data=', res.data)		
					this.hetongBiaoTi = res.data.title
					this.tihuoFangshi = res.data.pickUpType == 0 ?'自提':'物流'
					this.hetongName = res.data.saleContractName
					this.lianxiren = res.data.contact
					this.lianxiFangshi = res.data.mobilePhone
					this.hetongstartTime = res.data.startTime
					this.hetongendTime = res.data.entTime
					this.ying_url = res.data.pickUserCardFrontUrl
					this.shengFen_url = res.data.pickUserCardReverseUrl
					this.shenfenzhenghao = res.data.idCard
					this.beizhu = res.data.remark
					this.proDuctList = res.data.productList
					this.cangkuName = res.data.dcName
					this.wuliuName = res.data.logisticsName
					this.URL1 = res.data.pickUserCardFrontUrl
					this.URL2 = res.data.pickUserCardReverseUrl
					console.log('url=', this.URL1)
					}
				})
			}
		},
		onLoad(e) {
			console.log('e.log=', e.contractId)
			this.contractId = e.contractId
			this.getData()
		}
	}
</script>

<style>
	.register {
		background-color: #FFFFFF;
		width: 100%;
		height: 100%;
		border-top: 1upx solid #DDDDDD;
	}

	.register .item {
		flex-wrap: wrap;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 25upx 30upx;
		border-bottom: 1upx solid #DDDDDD;
	}

	.item.noborder {
		border: none
	}

	.item .label {
		font-size: 28upx;
	}

	.item .label::before {
		content: "*";
	}

	.item native_input1 {
		width: 70%;
		text-align: right;
	}

	.item input_code {
		width: 55%;
	}

	.item input_code .wrapper {
		border: none;
		padding: 0upx;
	}

	.item input_code .code {
		position: relative;
		width: auto;
		border: 1upx solid var(--theme-color);
		border-radius: 9999upx;
		padding: 10upx 20upx;
		white-space: nowrap;
	}

	.item input_code .code_retry {
		border: 1upx solid #BBBBBB;
		font-size: 25upx;
	}

	.item.detailAddress native_input1 {
		text-align: left;
		width: 100%;
	}

	.item .address {
		font-size: 28upx;
		color: #999999;
	}

	.item .address.placeholder {
		color: #BBBBBB;
	}

	.item HbUpload {
		width: 100%;
	}
	.item .tip {
		color: #999999;
		font-size: 24upx;
		width: 100%;
		text-align: center;
		padding: 20upx 0upx;
	}
	.item .imageView {
		width: 100%;
		padding: 20upx 0upx;
		text-align: center;		
	}
	.item .imageView1 {
		width: 100%;
		padding: 20upx 0upx;
		text-align: center;		
	}

	.register .agreenment {
		color: #999999;
		font-size: 24upx;
		margin-top: 21upx;
		margin-bottom: 80upx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding: 25upx 30upx;
		position: relative;
		padding-left: 72upx;
	}

	.agreenment checkbox {
		position: absolute;
		transform: scale(0.5);
		left: 20upx;
	}

	.agreenment .navigate {
		color: var(--theme-color);
		font-size: 24upx;
	}
	.register .sure {
		border-radius: 0upx;
		position: fixed;
		left: 0upx;
		right: 0upx;
		bottom: 0upx;
	}
	.BGView{
		display: flex;
		font-size: 32rpx;
		width: 100%;
		color: #333333;
		justify-content: center;
		align-items: center;
	}
	.fund_detail {
		background: #FFFFFF;
		min-height: 100vh;
	}
	
	.fund_detail .list {
	  border-top: 3upx solid #DEDEDE;
	  height: 120upx;
	  display: flex;
	  white-space: nowrap;
	  margin: 0upx 20upx;
	  font-size: 28upx;
	}
	.list:nth-child(1) {
		border: none;
	}
	.list .side_left {
	  width: 50%;
	  height: 100%;
	  display: flex;
	  justify-content: space-around;
	  flex-direction: column;
	  align-items: flex-start;
	}
	.list .side_left .title {
	  color: #666666;
	  font-size: 28rpx;
	}
	.list .side_left .balance {
	  color: #999999;
	  font-size: 28upx;
	}
	.list .side_left .balance .balance_money {
	  color: #999999;
	}
	.list .side_right {
	  width: 50%;
	  display: flex;
	  /* flex-direction: column; */
	  flex-direction: row;
	  justify-content: space-around;
	  align-items: flex-end;
	  
	}
	.list .side_right .trade {
	  color: #80C269;
	  font-size: 28upx;
	}
	.list .side_right .minus {
	  color: red;
	  font-size: 28upx;
	}
	.list .side_right .date {
	  color: #999999;
	  font-size: 28upx;
	}
	.list .side_right .putTest {
	  color: #999999;
	  top: 5rpx;
	  font-size: 28upx;
	 
	}
	
	.fund_detail .empty {
		width: 100%;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		color: #999999;
		font-size: 32upx;
		padding-bottom: 270upx;
		box-sizing: border-box;
	}
	.empty .icon {
		width: 300upx;
		height: 300upx;
		margin-bottom: 68upx;
		justify-content: space-between
	}
</style>